﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="Styles/ImageIndex.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body
        {
            margin: 0;
            background: black;
            color: white;
        }

        .floating 
        {
            float:left;

        }

        .left
        {
            float: left;
        }

        .right
        {
            float: right;
        }

        .floating img 
        {
            display: block;
            margin-top:10px;     
            height:210px;
            width:210px;
            margin-right:10px;
        }
        .pageHeader
        {
            font-family:Segoe UI Light;
            font-size:42pt;
        }
        .pageSubHeader
        {
            font-family:Segoe UI Light;
            font-size:20pt;
      
        }
        a
        {
            text-decoration:none;
            color: white;
        }

        a:hover {
            color: #4b8588;
        }

        #container
        {
            width:500%;
            min-height:500px;
        }
        .appBar
        {
            height: 88px;
            background: #333;
            position: absolute;
            
            color: White;
            font-family: Segoe UI;
        }

        .top
        {
            top: 0px;
        }

        .bottom
        {            
            bottom: 0px;
        }

        .metroButton
        {
            margin: 0 auto;
        }

        .metroButton:hover
        {
            border-radius:100px;
            height:40px;
            width:40px;
        }

        .menuBtn
        {            
            margin: 16px 25px 0 25px;   
            height:72px;
        }

        .menuBtn:hover
        {
            cursor: pointer;
        }

                   
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function adaptSize() {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            $("#container").height(windowHeight - 120);
        }

        $(window).resize(function (){ adaptSize();});

        $(document).ready(function () {
             var windowWidth = $(window).width();
             var windowHeight = $(window).height();
             $("#topAppBar").width(windowWidth).hide();
             $("#bottomAppBar").width(windowWidth).hide();
             adaptSize();

             $("a").bind("contextmenu", function (e) {
                 return false;
             });

             var bottomAppBar = $("#bottomAppBar");
             var topAppBar = $("#topAppBar");

             $("a").mousedown(function (event) {
                 switch (event.which) {
                     case 1:
                         break;
                     case 2:
                         break;
                     case 3:
                        if (bottomAppBar.is(":visible")) {
                             bottomAppBar.width(windowWidth).slideToggle("slow", "swing");
                             topAppBar.width(windowWidth).slideToggle("slow", "swing");
                         } else {
                             bottomAppBar.width(windowWidth).slideDown("slow", "swing");
                             topAppBar.width(windowWidth).slideDown("slow", "swing");
                         }

                 }
             });

             $("#tiles").mousedown(function (event) {
                 if (event.which == 1) {
                     bottomAppBar.slideUp("fast");
                     topAppBar.slideUp("fast");
                 }
             });
         });

    </script>

    <script type="text/javascript">
        var pageIndex = 1;
        var pageCount;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords();
            }
        });
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {
                $("#loader").show();
                $.ajax({
                    type: "POST",
                    url: "Home.aspx/GetCustomers",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var customers = xml.find("tbItems");
            customers.each(function () {
                var customer = $(this);
                var table = $("#container table").eq(0).clone(true);
                $(".groupTitle", table).html(customer.find("GroupTitle").text());

                $("#container").append(table).append("<br />");
            });
            $("#loader").hide();
        }
</script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="topAppBar" class="appBar top">
         <div class="menuBtn left"> 
             <img src="metro.icons/white/parent.png" height="40px" width="40px" class="metroButton" title="Go all the way back home" alt="Home"/>
             <div>Home</div>
         </div>
        <div class="menuBtn left"> 
             <img src="metro.icons/white/favs.png" height="40px" width="40px" class="metroButton" title="Open your favorite list" alt="Favorites"/>
             <div>Favorites</div>
         </div>
        <div class="menuBtn right"> 
            <img src="metro.icons/white/check.png" height="40px" width="40px" class="metroButton" title="Open your subscribed sessions" alt="Schedules"/>
            <div>Schedules</div>
        </div>
        <div class="menuBtn right"> 
             <img src="metro.icons/white/camera.png" height="40px" width="40px" class="metroButton" title="Open your learning history" alt="History"/>
             <div>History</div>
        </div>

  </div>
 <%-- <div id="topright" style="height:100px; margin:-10px,-10px,-10px,-10px; background:black; position:absolute;"></div>--%>
 <div>
   <div class="pageHeader" style="margin-left:50px;">My First App</div>
 
  <div id="tiles" style="overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">
    
    <div id="container">
     <div style="margin-top:14px; margin-left:50px;margin-right:50px;" id="imageDiv">
    <asp:DataList ID="DataList2" runat="server" RepeatDirection="Horizontal"
             onitemcommand="DataList2_ItemCommand" 
             onitemdatabound="DataList2_ItemDataBound">
    <ItemTemplate>
    <div class="pageSubHeader"><asp:LinkButton ID="TopNews" runat="server" CommandName="GroupDetail" CommandArgument='<%#Eval("GroupID") %>' Text='<%#Eval("GroupTitle")%>'></asp:LinkButton></div>   
   <asp:Repeater ID="TopNews1" runat="server">   
 <ItemTemplate>
 <div class="floating">
  <div class="f1">
    <asp:LinkButton ID="lnkThumbDetail" OnClick="linkButton_Item" runat="server"  CommandName="thumbDetail" CommandArgument='<%#Eval("ItemID") %>'> 
 <img src='<%#Eval("ItemThumbPath") %>' alt=''/></asp:LinkButton> 
 <div class="f2">
  <div>
  <div style="padding-left:10px; font-size:11pt;">
<asp:Label ID="lblTitle" runat="server" Text='<%#Eval("ItemTitle") %>'></asp:Label>

</div>

<div  style="padding-left:10px; margin-top:10px; font-size:9pt;">
<asp:Label ID="lblTag" runat="server" Text='<%#Eval("ItemTag") %>'></asp:Label>
</div>
  </div>  
  </div>
 </div>


 
 </div>   
   </ItemTemplate>
   </asp:Repeater>  
         </ItemTemplate>
        </asp:DataList>
        </div>
        <img id="loader" alt="" src="loading.gif" style="display: none" />
    </div>
 </div>
 
  <div id="bottomAppBar" class="appBar bottom">         
        <div class="menuBtn left"> 
            <img src="metro.icons/white/flag.png" height="40px" width="40px" class="metroButton" title="Clone selection" alt="Clone"/>
            <div>Clone</div>
        </div>
        <div class="menuBtn left"> 
             <img src="metro.icons/white/edit.png" height="40px" width="40px" class="metroButton" title="Edit selection" alt="Edit"/>
             <div>Edit</div>
        </div>
        <div class="menuBtn left"> 
             <img src="metro.icons/white/favs.addto.png" height="40px" width="40px" class="metroButton" title="Add selection to favorites" alt="Add To"/>
             <div>Add To</div>
        </div>
        <div class="menuBtn left"> 
          <a href="WebControls/Group.aspx"> <img src="metro.icons/white/favs.addto.png" height="40px" width="40px" class="metroButton" title="Add a new group" alt="Add Group"/></a>
             <div><a href="WebControls/Group.aspx" style="color:White;">Add Group</a></div>
        </div>
        <div class="menuBtn right"> 
             <img src="metro.icons/white/delete.png" height="40px" width="40px" class="metroButton" title="Delete selection" alt="Delete"/>
             <div>Delete</div>
         </div>
        <div class="menuBtn right"> 
            <img src="metro.icons/white/settings.png" height="40px" width="40px" class="metroButton" title="Settings" alt="Settings"/>
            <div>Settings</div>
        </div>
        <div class="menuBtn right"> 
             <img src="metro.icons/white/folder.png" height="40px" width="40px" class="metroButton" title="Arrange" alt="Arrange"/>
             <div>Arrange</div>
        </div>
  </div>
   </div>
    </form>
</body>
</html>
